<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0,user-scalable=no" />
		<title>注册</title>		
		<link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css" />
	</head>
	<body>
		<div class="container">			
			<!--<ol class="breadcrumb">
				<li><a href="#">人力资源管理系统</a></li>
				<li><a href="#">员工管理</a></li>				
				<li>增加员工</li>
			</ol>-->
			
			<h2 class="page-header">注册</h2>
			
			<form id="form1" class="form-horizontal">				
				<div class="form-group">
					<label for="" class="col-sm-2">昵称</label>
					<div class="col-sm-8">
						<input v-model="user.userName" type="text" id="userName" name="userName" placeholder="请输入昵称" class="form-control"/>
					</div>
				</div>	
				<div class="form-group">
					<label for="" class="col-sm-2">登陆账号</label>
					<div class="col-sm-8">
						<input @change="checkLoginName()" v-model="user.userLoginName" type="text" id="userLoginName" name="userLoginName" placeholder="请输入登陆账号" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">设置密码</label>
					<div class="col-sm-8">
						<input v-model="user.userPwd" type="password" id="userPwd" name="userPwd" placeholder="请设置登陆密码" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">确认密码</label>
					<div class="col-sm-8">
						<input v-model="user.userPwd2" type="password" id="userPwd2" name="userPwd2" placeholder="请再次输入密码" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">邮箱</label>
					<div class="col-sm-8">
						<input v-model="user.userEmail" type="text" id="userEmail" name="userEmail" placeholder="请输入邮箱地址" class="form-control"/>
					</div>
				</div>	
				<div class="form-group">
					<label for="" class="col-sm-2">电话</label>
					<div class="col-sm-8">
						<input v-model="user.userPhone" type="text" id="userPhone" name="userPhone" placeholder="请输入电话号码" class="form-control"/>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">专业</label>
					<div class="col-sm-8">
						<select v-model="user.majorsId" name="majorsId" id="majorsId" class="form-control">
							<option value="">请选择专业</option>
							<option v-for="majors in majorsData" :value="majors.majorsId">{{majors.majorsName}}</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">职务</label>
					<div class="col-sm-8">
						<select v-model="user.jobId" name="jobId" id="jobId" class="form-control">
							<option value="">请选择职务</option>
							<option v-for="job in jobData" :value="job.jobId">{{job.jobName}}</option>
						</select>
					</div>
				</div>	
				<div class="form-group">
					<label for="" class="col-sm-2">个人简介</label>
					<div class="col-sm-8">
						<textarea v-model="user.userIntro" id="userIntro" name="userIntro" class="form-control"></textarea>
					</div>
				</div>				
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<!--<input type="hidden" id="userHiredate" name="userHiredate" class="form-control"/>-->
						<input @click="add()" type="button" value="注册" class="btn btn-success" id="addBtn"/>
						<input type="button" value="取消" class="btn btn-warning" onclick="history.back();" />
					</div>					
				</div>
			</form>	
		</div>		
		
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/datetimepicker/jquery.datetimepicker.js" ></script>
		<script>
						
			//vue实例
			var vue = new Vue({
				el:'.container',
				data:{
					majorsData:[],
					jobData:[],
					user:{
						majorsId:'',
						jobId:'',
//						userHiredate:''
					}
				},
				methods:{
					//获得部门列表数据
					queryMajors:function(){
						axios.get(baseUrl + '/majors/query')
							.then(function(response){
								this.majorsData = response.data;
							}.bind(this))
							.catch(function(error){
								layer.msg('获得专业列表失败');
							});
						
					},
					//获得职务列表数据
					queryJob:function(){
						axios.get(baseUrl + '/job/query')
							.then(function(response){
								this.jobData = response.data;
							}.bind(this))
							.catch(function(error){
								layer.msg('获得职务列表失败');
							});
						
					},
					//改变日期同步更新数据模型
//					changeuserHiredate:function(){						
//						this.user.userHiredate = $('#userHiredate').val();						
//					},					
					//检查用户名是否存在
					checkLoginName:function(){
						
						if (this.user.userLoginName == '')
							return;
							
						axios.get(baseUrl + '/user/check',{
								params:{
									userLoginName:this.user.userLoginName
								}
							})
							.then(function(response){
																
								if (response.data)
									layer.msg('用户名已经被占用');
								else
									layer.msg('用户名可以使用');
								
							}.bind(this))
							.catch(function(error){
								layer.msg('检查用户名失败');
							});
						
					},
					//增加员工
					add:function(){
						
						if (!checkForm())
							return;
							
						axios.post(baseUrl + '/user/add',$.param(this.user))
							.then(function(response){
								
								layer.msg('注册成功');	
								setTimeout(function(){
									location.href = 'login.html';
								},500);
								
							}.bind(this))
							.catch(function(error){
								layer.msg('注册失败');
							});
						
					}
				},
				mounted:function(){
					this.queryMajors();
					this.queryJob();
				}
						
			});	
			
			// 给文本框绑定日历控件
//			$('#userHiredate').datetimepicker({
//				lang:'ch',
//				format:'Y-m-d',
//				formatDate:'Y-m-d',
//				timepicker:false
//			});
			
			//表单验证函数
			function checkForm() {
				
				//员工姓名
				var userName = $('#userName');
				
				if (userName.val() == '' || userName.val().length > 10) {
					layer.msg('姓名不能为空，且最多10字符');
					userName.focus();
					return false;
				}
				
				//登陆名称
				var userLoginName = $('#userLoginName');
				
				if (userLoginName.val() == '' || userLoginName.val().length > 10) {
					layer.msg('登陆名不能为空，且最多10字符');
					userLoginName.focus();
					return false;
				}
				
				//检查登陆名是否存在（同步请求）
				var flag;
				
				$.ajax({
					url:baseUrl + '/user/check',
					type:'POST',
					dataType:'text',
					data:{userLoginName:userLoginName.val()},
					async:false
				})
				.done(function(data){				
					flag = data;			
				})
				.fail(function(xhr,status,text){
					layer.msg('登陆名检查请求失败');				
				});	
				
				if (flag == 'true') {
					layer.msg('登录名已经存在');
					userLoginName.focus();
					return false;
				}	
				
				//密码验证
				
				
				//邮箱验证
				
				
				//电话号码验证
				
				
				//入职日期
//				var userHiredate = $('#userHiredate');
//				
//				if (userHiredate.val() == '') {
//					layer.msg('必须选择入职日期');
//					userHiredate.focus();
//					return false;
//				}			
				
				//工资验证（工资必须是职务范围之内的工资）

				
				
				//部门
				var majorsId = $('#majorsId');
				
				if (majorsId.val() == '') {
					layer.msg('请选择一个部门');
					majorsId.focus();
					return false;
				}
				
				//职务
				var jobId = $('#jobId');
				
				if (jobId.val() == '') {
					layer.msg('请选择一个职务');
					jobId.focus();
					return false;
				}
				
				//员工简介（最多600字）
								
								
				return true;
			}
		</script>		
	</body>
</html>